<div class="layui-header">
  <div class="layui-logo layui-hide-xs layui-bg-black" id="logoText"><img src="#">小罗博客管理系统</div>
  
  <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
      <a href="javascript:;">
        <img id="avatar" src=""  class="layui-nav-img">
        <span id="username">请登录</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;" id="showUserInfo">个人信息</a></dd>
        <dd><a href="javascript:;" id="updatePassword">修改密码</a></dd>
        <dd><a href="javascript:;" id="logout">退出</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
      <a href="javascript:;">
        <i class="layui-icon layui-icon-more-vertical"></i>
      </a>
    </li>
  </ul>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//  获取cookie设置到header页面中，显示用户的信息
 let {
    username,
    intro,
    avatar
  } = JSON.parse(Cookies.get('userInfo'));
  // 回显图片
  $('#avatar').attr('src',avatar)
  $("#username").text(username)

 window.onload = function () {
    // 修改密码
    // 弹窗修改密码的模板
    let htmlStr = `
          <div id="updPasswordContainer">
        <div class="layui-form-item">
          <label class="layui-form-label">原密码</label>
          <div class="layui-input-inline">
            <input type="password" id="oldpassword"   placeholder="请输入新密码" class="layui-input" autocomplete="off" >
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-inline">
            <input type="password" id="password"  placeholder="请输入新密码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认新密码</label>
          <div class="layui-input-inline">
            <input type="password" id="repassword"  placeholder="请输入新密码" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    `;

    $("#updatePassword").click(function () {
      layer.open({
        title: "修改密码",
        shadeClose: true,
        skin: 'layui-layer-rim', 
        area: ['520px', '340px'], 
        content: htmlStr,
        btn: "确认修改",
        yes: function (index, layero) {
          let oldpwd = $("#oldpassword").val();
          let newpwd = $("#password").val();
          let renewpwd = $("#repassword").val();
          console.log(oldpwd, newpwd, renewpwd)
          if ([oldpwd, newpwd, renewpwd].includes('')) {
            alert('不能为空')
          }
          if (newpwd !== renewpwd) {
            alert('两次密码不一致')
          }
          let xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function(){
            if(this.readyState === 4 && this.status === 200){
              let {code,message} = JSON.parse(this.responseText)
              if(code === 20000){
                layer.msg(message)
                location.href = "/logout"
              }else{
                alert(message)
              }
            }
          }
          xhr.open('post','/updatePassword',true)
          xhr.setRequestHeader("Content-type",'application/x-www-form-urlencoded')
          let formData = `oldpwd=${oldpwd}&newpwd=${newpwd}&renewpwd=${renewpwd}`
          xhr.send(formData)
          
        }
      });
    })
  }
</script>